<template>
  <!-- 任务日历 -->
  <div class="box-shadow">
    <!-- 搜索 -->
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="listQuery"
          size="small"
          :inline="true"
          label-width="115px"
        >
          <el-form-item :label="$t('任务名称') + ':'" prop="taskName">
            <el-input
              v-model="listQuery.taskName"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
            />
          </el-form-item>
          <el-form-item prop="startTime" :label="$t('任务执行时间')">
            <el-date-picker
              v-model="listQuery.startTime"
              type="datetime"
              :placeholder="$t('选择开始时间')"
              size="medium"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptionsStart"
            >
            </el-date-picker>
          </el-form-item>
          <span
            style="
              color: #fff;
              margin-right: 10px;
              display: inline-block;
              height: 36px;
              line-height: 36px;
            "
            >—</span
          >
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="listQuery.endTime"
              type="datetime"
              :placeholder="$t('选择结束时间')"
              size="medium"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptionsEnd"
            >
            </el-date-picker>
          </el-form-item>
          <el-collapse-transition>
            <div v-if="isCollapse">
              <el-form-item
                prop="progressStatusList"
                :label="$t('任务进度状态') + ':'"
                label-width="118px"
              >
                <el-checkbox-group v-model="listQuery.progressStatusList">
                  <el-checkbox label="1">{{ $t("等待执行") }}</el-checkbox>
                  <el-checkbox label="2">{{ $t("任务超期") }}</el-checkbox>
                  <el-checkbox label="3">{{ $t("正在执行") }}</el-checkbox>
                  <el-checkbox label="4">{{ $t("任务暂停") }}</el-checkbox>
                  <el-checkbox label="5">{{ $t("执行完成") }}</el-checkbox>
                  <el-checkbox label="6">{{ $t("中途终止") }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-collapse-transition>
          <img
            @click="collapseBtn"
            :src="collapseUrl"
            class="collapse-img"
            alt=""
          />
        </el-form>
      </div>
      <div class="search-area-btn btns">
        <div
          v-hasPermi="['task:calendar:search']"
          @click="serachBtn"
          class="serch-btn cursor-pointer"
        >
          {{ $t("搜索") }}
        </div>
        <div
          v-hasPermi="['task:calendar:reset']"
          @click="resetFormBtn"
          class="reset-btn cursor-pointer"
        >
          {{ $t("重置") }}
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="calendar-copm">
      <!-- 头部 -->
      <div class="cal-header">
        <div class="header-left">
          <div
            v-hasPermi="['task:calendar:add']"
            @click="addTask"
            class="serch-btn2 cursor-pointer table-top"
          >
            + {{ $t("快捷任务") }}
          </div>
        </div>
        <div class="header-right">
          <div
            class="status-gather"
            v-for="(item, index) in statusInfo"
            :key="index"
          >
            <div
              class="status-point"
              :style="`background-color:${item.bgc}`"
            ></div>
            <div style="font-size: 14px">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="select" style="position: relative">
        <el-form inline class="selectForm" v-show="currentChanel == 'month'">
          <el-form-item>
            <div class="today" @click="todayClick">
              <span
                :class="isToday ? 'serch-btn' : ''"
                style="display: inline-block; width: 100%; border: none"
                >{{ $t("今天") }}</span
              >
            </div>
          </el-form-item>
          <el-form-item class="myselect">
            <el-select
              v-model="curYear"
              @change="selectTimeChange"
              :placeholder="$t('请选择')"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item.key"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <!-- <i class="el-icon-arrow-left"></i> -->
          <el-form-item class="myselect" style="margin: 0 5px">
            <el-select
              v-model="curMonth"
              @change="selectTimeChange"
              :placeholder="$t('请选择')"
            >
              <el-option
                v-for="item in monthOptions"
                :key="item.key"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form
          inline
          class="selectForm"
          v-show="currentChanel == 'day' && serachFlag"
        >
          <el-form-item>
            <div class="today" @click="dayClick">
              <span
                :class="isDay ? 'serch-btn' : ''"
                style="display: inline-block; width: 100%; border: none"
                >{{ $t("今天") }}</span
              >
            </div>
          </el-form-item>
          <el-form-item style="margin-left: 6px">
            <el-date-picker
              v-model="monthDay"
              value-format="yyyy-MM-dd"
              type="date"
              :placeholder="$t('选择日期')"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div
          v-if="serachFlag"
          class="header-right"
          style="position: absolute; right: 10px; top: 20px"
        >
          <div class="chanel">
            <div class="cursor-pointer" @click="chanelBtn('month')">
              <div :class="currentChanel === 'month' ? 'blueTab' : 'monthTab'">
                <span>{{ $t("月") }}</span>
              </div>
            </div>
            <div class="cursor-pointer" @click="chanelBtn('day')">
              <div :class="currentChanel === 'day' ? 'blueTab' : 'monthTab'">
                <span>{{ $t("日") }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 日历组件 -->
      <el-calendar
        v-model="timeValue"
        :first-day-of-week="7"
        v-if="currentChanel == 'month'"
      >
        <div
          @mouseenter="enterDate(data)"
          @mouseleave="leaveDate(data)"
          slot="dateCell"
          slot-scope="{ data }"
          @click.capture="allcalendar(data)"
        >
          <!-- 月 - 日 -->
          <!-- <p>{{ data.day.split("-").slice(1).join("-") }}</p> -->
          <!-- 日 -->
          <div>
            <span style="margin-left: 16px">{{
              data.day.split("-").slice(2).join("-")
            }}</span>
            <div
              v-if="dateData.indexOf(data.day) != -1 && data.day == activeDate"
              style="display: inline-block; float: right; margin-right: 8px"
            >
              <img
                style="margin-right: 8px"
                src="../../../assets/images/task/calDetail.svg"
                @click="getDayDetail(data)"
              />
              <img
                src="../../../assets/images/task/calDel.svg"
                @click="delDay(data)"
              />
            </div>
          </div>
          <div v-for="(item, index) in calenData" :key="index">
            <div v-if="data.day == item.date">
              <div class="calender-item" @click="tackClick(item.content[0])">
                <span
                  class="item-radius"
                  :style="`background-color:${
                    calFontColor[item.content[0].progressStatus].color
                  }`"
                ></span>
                <span
                  :title="item.content[0].taskName"
                  class="item-span"
                  :style="`color:${
                    calFontColor[item.content[0].progressStatus].color
                  };`"
                  >{{ item.content[0].taskName }}</span
                >
              </div>
              <div
                class="calender-item"
                v-if="item.content.length > 1"
                @click="tackClick(item.content[1])"
              >
                <span
                  class="item-radius"
                  :style="`background-color:${
                    calFontColor[item.content[1].progressStatus].color
                  }`"
                ></span>
                <span
                  :title="item.content[1].taskName"
                  class="item-span"
                  :style="`color:${
                    calFontColor[item.content[1].progressStatus].color
                  };`"
                  >{{ item.content[1].taskName }}</span
                >
              </div>
              <div
                class="calender-item"
                v-if="item.content.length > 2"
                @click="tackClick(item.content[2])"
              >
                <span
                  class="item-radius"
                  :style="`background-color:${
                    calFontColor[item.content[2].progressStatus].color
                  }`"
                ></span>
                <span
                  :title="item.content[2].taskName"
                  class="item-span"
                  :style="`color:${
                    calFontColor[item.content[2].progressStatus].color
                  };`"
                  >{{ item.content[2].taskName }}</span
                >
              </div>
              <!-- 展示更多 -->
              <el-popover
                placement="left"
                width="200"
                trigger="click"
                popper-class="calendar-message-popover"
              >
                <div
                  class="cursor-pointer calender-item"
                  v-for="(labelItem, labelIndex) in item.content.slice(
                    3,
                    item.content.length
                  )"
                  :key="labelIndex"
                  @click="tackClick(labelItem)"
                >
                  <span
                    class="item-radius"
                    :style="`background-color:${
                      calFontColor[labelItem.progressStatus].color
                    }`"
                  ></span>
                  <!-- v-if="taskId != -1" -->
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="labelItem.taskName"
                    placement="left"
                  >
                    <span
                      class="item-span"
                      :style="`color:${
                        calFontColor[labelItem.progressStatus].color
                      };`"
                      >{{ labelItem.taskName | handleCtx("10") }}</span
                    >
                  </el-tooltip>
                </div>
                <!-- 第四个 -->
                <div slot="reference" v-if="item.content.length > 3">
                  <span class="there-were">
                    {{ $t("还有") }}{{ item.content.length - 3
                    }}{{ $t("项") }}</span
                  >
                </div>
              </el-popover>
            </div>
          </div>
        </div>
      </el-calendar>
      <!-- 表格组件 -->
      <div v-if="currentChanel == 'day'">
        <!-- 表格 -->
        <div class="table">
          <el-table
            ref="tableRef"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              v-if="!serachFlag"
              align="center"
              prop="execDay"
              :label="$t('执行日期')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="execTime"
              :label="$t('执行时间')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="taskName"
              :label="$t('任务名称')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="progressStatus"
              :label="$t('任务进度状态')"
            >
              <template slot-scope="scope">
                <div
                  :style="`color:${
                    calFontColor[scope.row.progressStatus].color
                  }`"
                >
                  {{ scope.row.progressStatusName }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              align="center"
              prop="progressStatus"
              :label="$t('任务结果状态')"
            >
              <template slot-scope="scope">
                <div
                  :style="`color:${
                    calFontColor[scope.row.progressStatus].color
                  }`"
                >
                  {{ scope.row.progressStatusName }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column align="center" :label="$t('操作')" width="200px">
              <template slot-scope="scope">
                <div class="table-btns">
                  <div
                    v-if="scope.row.progressStatus != '4'"
                    class="serch-btn cursor-pointer"
                    :style="
                      scope.row.progressStatus != '3'
                        ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                        : scope.row.progressStatus == '4'
                        ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                        : ''
                    "
                    @click="suspend(scope.row)"
                  >
                    {{ $t("暂停") }}
                  </div>
                  <div
                    style="width: 162px"
                    v-if="scope.row.progressStatus == '4'"
                    class="serch-btn cursor-pointer"
                    :style="
                      scope.row.progressStatus != '4'
                        ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                        : scope.row.progressStatus != '4'
                        ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                        : ''
                    "
                    @click="cancelSuspend(scope.row)"
                  >
                    {{ $t("取消暂停") }}
                  </div>
                  <div
                    class="btn-red cursor-pointer"
                    :style="
                      scope.row.progressStatus != '3' &&
                      scope.row.progressStatus != '4'
                        ? 'border-color:rgba(0,255, 255, 0, 1);background-color:rgba(0,255, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)'
                        : ''
                    "
                    @click="taskTermination(scope.row)"
                  >
                    {{ $t("终止") }}
                  </div>

                  <div
                    class="btn-red cursor-pointer"
                    :style="
                      scope.row.progressStatus >= '3'
                        ? 'border-color:rgba(0,255, 255, 0, 1);background-color:rgba(0,255, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)'
                        : ''
                    "
                    @click="taskDel(scope.row)"
                  >
                    {{ $t("删除") }}
                  </div>
                  <el-popover placement="bottom" trigger="hover">
                    <div class="popover-content">
                      <div
                        @click="handleLook(scope.row)"
                        class="btn-red cursor-pointer"
                        style="
                          width: 40px;
                          height: 30px;
                          line-height: 30px;
                          margin-left: 10px;
                        "
                      >
                        {{ $t("查看") }}
                      </div>
                    </div>
                    <div slot="reference" style="color: #fff">
                      <img
                        style="display: inline-block; width: 20px; height: 20px"
                        src="../../../assets/images/task/more.png"
                        alt=""
                      />
                    </div>
                  </el-popover>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagenation">
            <pagination
              :total="total"
              :page.sync="listQuerySubmit.pageNum"
              :limit.sync="listQuerySubmit.pageSize"
              @pagination="getDataList"
            >
            </pagination>
          </div>
        </div>
      </div>
    </div>
    <add ref="add" @getDataList="getDataList"></add>
    <el-dialog
      width="560px"
      :title="$t('确认删除')"
      :visible.sync="dayTaskMadal"
      :before-close="closeDialog"
    >
      <div class="content">
        <div class="line-one">
          <img src="../../../assets/images/data/resource/mark.png" alt="" />
          <span class="confirm-font">{{ $t("您将删除") }}</span>
          <span class="warn-font">{{ delDayInfo }}</span>
          <span class="confirm-font">{{ $t("的任务请确认是否删除") }}</span>
        </div>
        <div class="obj-text">
          {{ $t("各进度状态下子任务删除的业务逻辑如下") }}<br />
          {{ $t("等待执行直接删除") }}<br />
          {{ $t("任务超期直接删除") }}<br />
          {{ $t("正在执行强制终止不删除") }}<br />
          {{ $t("任务暂停强制终止不删除") }}<br />
          {{ $t("执行完成不删除") }}<br />
          {{ $t("中途终止不删除") }}<br />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="serch-btn" @click="taskDialogConfirm">
          {{ $t("确定删除") }}
        </div>
        <div class="reset-btn" style="margin-left: 15px" @click="closeDialog">
          {{ $t("取消") }}
        </div>
      </div>
    </el-dialog>
    <!-- 删除单日任务弹框 -->
    <TaskDeleteModal
      :detailInfos="detailInfos"
      :status="status"
      :taskId="taskId"
      :execId="execId"
      :rowTaskId="rowTaskId"
      @getDataList="getDataList"
      ref="task_delete_modal"
    ></TaskDeleteModal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from "moment";
import add from "./components/add";
import TaskDeleteModal from "@/components/TaskDeleteModal";
import {
  API_getcalendarList,
  API_getcalendarpageList,
  API_calendarDelete,
  delExecIds,
} from "@/api/task/calendar.js";
import {
  API_taskControl, //任务控制
} from "@/api/robot/monitor";
import { handleCreateDatePicker } from "@/utils/time.js";
export default {
  dicts: ["dimension"],
  components: { add, TaskDeleteModal },
  data() {
    return {
      isCollapse: false, //展开折叠
      currentChanel: "month", //选中的列表/日历
      currentItem: "", //挡圈选中的item ID
      dialogTitle: "", //弹框标题
      listQuery: {
        taskName: "",
        startTime: moment().subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        progressStatusList: [],
        execTime: "", //执行时间
        pageNum: 1,
        pageSize: 10,
      },
      // 分页总数
      total: 0,
      // 提交参数
      listQuerySubmit: {},
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.listQuery.endTime;
          if (endDateVal) {
            return (
              time.getTime() >=
              new Date(endDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.listQuery.startTime;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },
      //表格数据
      tableData: [],
      //状态 + 颜色
      statusInfo: [
        {
          label: this.$t("等待执行"),
          bgc: "#00D1FF",
        },
        {
          label: this.$t("任务超期"),
          bgc: "#FFAD30",
        },
        {
          label: this.$t("正在执行"),
          bgc: "#FF4967",
        },
        {
          label: this.$t("任务暂停"),
          bgc: "#FF7000",
        },
        {
          label: this.$t("执行完成"),
          bgc: "#73F6AF",
        },
        {
          label: this.$t("中途停止"),
          bgc: "#CC77DC ",
        },
      ],
      timeValue: new Date(),
      listMonth: moment().format("YYYY年MM月"), //列表头部当前月份
      //日历后端接口结构
      calenData: [],
      //不同状态不同颜色-日历
      calFontColor: {
        0: { color: "#00D1FF", borderColor: "#00D1FF" }, //等待执行
        1: { color: "#00D1FF", borderColor: "#00D1FF" }, //等待执行
        2: { color: "#FFAD30", borderColor: "#FFAD30" }, //任务超期
        3: { color: "#FF4967", borderColor: "#FF4967" }, //正在执行
        4: { color: "#FF7000", borderColor: "#FF7000" }, //任务暂停
        5: { color: "#73F6AF", borderColor: "#73F6AF", fontbgc: "#73F6AF" }, //成功
        6: { color: "#CC77DC", borderColor: "#CC77DC", fontbgc: "#FF4967" }, //失败
      },
      //成功失败颜色
      sufa: {
        1: { color: "#73F6AF" }, //等待执行
        2: { color: "#FF4967" }, //任务超期
      },
      // 月
      monthOptions: [],
      yearOptions: [],
      curYear: new Date().getFullYear(), // 当前年
      curMonth: (new Date().getMonth() + 1).toString().padStart(2, "0"), // 当前月
      // 日
      monthDayOptions: [],
      yearDayOptions: [],
      curDayYear: new Date().getFullYear(), // 当前年
      curDayMonth: (new Date().getMonth() + 1).toString().padStart(2, "0"), // 当前月
      curDay: "",
      monthDay: "",
      isToday: false, //是否是今天(月)
      isDay: false, //是否是今天（日）
      dateData: [], //所有有数据的日期
      dayTaskMadal: false,
      delDayInfo: "",
      serachFlag: true,
      monthJogDay: "",
      activeDate: "",
      status: "",
      taskId: "",
      execId: "",
      taskName: "",
      currentTaskTimer: "",
      rowTaskId: "",
      taskExecId: "",
      detailInfos: {},
    };
  },
  computed: {
    allTime() {
      const { curYear, curMonth, isToday } = this;
      return {
        curYear,
        curMonth,
        isToday,
      };
    },
  },
  watch: {
    isActive: {
      handler(val) {
        if (val == true) {
          this.collapseUrl = require("../../../assets/less.png");
        } else {
          this.collapseUrl = require("../../../assets/more.png");
        }
      },
      immediate: true,
      deep: true,
    },
    allTime: {
      handler: function (newval) {
        this.listQuerySubmit.startTime = "";
        this.listQuerySubmit.endTime = "";
        if (this.isToday) {
          this.listQuery.execTime = moment(new Date()).format("YYYY-MM-DD");
          this.listQuerySubmit.execTime = moment(new Date()).format(
            "YYYY-MM-DD"
          );
        } else {
          this.listQuery.execTime = newval.curYear + "-" + newval.curMonth;
          this.listQuerySubmit.execTime =
            newval.curYear + "-" + newval.curMonth;
        }
        //日历绑定字段
        this.timeValue = new Date(this.listQuerySubmit.execTime);
        this.listQuerySubmit.pageNum = 1;
        this.listQuerySubmit.pageSize = 10;
        this.getDataList();
      },
      deep: true,
      taskId: "",
      execId: "",
      // immediate: true,
    },
  },
  created() {
    this.listQuery.execTime = this.curYear + "-" + this.curMonth;
    this.listQuerySubmit = Object.assign({}, this.listQuery);
    this.getDataList();
  },
  mounted() {
    // 月
    this.monthOptions = handleCreateDatePicker(this).months;
    this.yearOptions = handleCreateDatePicker(this).years;
    // 日
    this.monthDayOptions = handleCreateDatePicker(this).months;
    this.yearDayOptions = handleCreateDatePicker(this).years;
    this.currentTaskTimer = setInterval(() => {
      this.getTaskInfo();
    }, 1000);
  },
  methods: {
    enterDate(data) {
      this.activeDate = data.day;
    },
    //获取当前任务信息
    getTaskInfo() {
      this.$store.dispatch("getGlobalTaskInfo").then((res) => {
        if (res.code == 200 && res.data) {
          this.taskId = JSON.parse(res.data).taskId; //任务ID
          this.execId = JSON.parse(res.data).execId; //任务执行ID
          this.taskName = JSON.parse(res.data).taskName; //任务名称
        }
      });
    },
    leaveDate() {},
    //日列表查看
    handleLook(data) {
      this.tackClick(data);
    },
    // 任务终止   按钮
    taskTermination(row) {
      if (row.progressStatus != "3" && row.progressStatus != "4") {
        return;
      } else {
        this.$confirm(
          `${this.$t("确定终止任务")}${row.taskName}?`,
          this.$t("提示"),
          {
            confirmButtonText: this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            type: "warning",
          }
        )
          .then(() => {
            API_taskControl({
              cmd: "3X13",
              values: [row.taskId, row.taskExecId],
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.$message({
                  type: "success",
                  message: this.$t("任务已终止"),
                });
                this.getDataList();
              } else {
                this.$message.error(this.$t("终止失败请重试"));
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("已取消"),
            });
          });
      }
    },
    // 任务删除按钮
    taskDel(row) {
      this.detailInfos = row;
      this.status = row.progressStatus.toString();
      this.rowTaskId = row.taskId.toString();
      this.taskExecId = row.taskExecId;
      this.$refs.task_delete_modal.open(this.taskExecId);
    },
    // 任务 取消暂停 按钮
    cancelSuspend(row) {
      if (row.progressStatus == "4") {
        if (this.taskId != -1) {
          this.$confirm(
            `${this.$t("当前正在执行：")}${
              row.taskName
            }，暂不支持恢复其它任务。`,
            this.$t("提示"),
            {
              showConfirmButton: false,
              cancelButtonText: this.$t("取消"),
              type: "warning",
            }
          )
            .then(() => {})
            .catch(() => {
              this.$message({
                type: "info",
                message: this.$t("已取消"),
              });
            });
        } else {
          this.$confirm(
            `${this.$t("确定恢复任务")}${row.taskName}?`,
            this.$t("提示"),
            {
              confirmButtonText: this.$t("确定"),
              cancelButtonText: this.$t("取消"),
              type: "warning",
            }
          )
            .then(() => {
              API_taskControl({
                cmd: "3X11",
                values: [row.taskId, row.taskExecId],
              }).then((res) => {
                if (res.code == 200 && res.data.nerrcode == 0) {
                  this.$message({
                    type: "success",
                    message: this.$t("已恢复暂停任务!"),
                  });
                  this.getDataList();
                } else {
                  this.$message.error(this.$t("恢复暂停任务失败请重试"));
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: this.$t("已取消"),
              });
            });
        }
      }
    },
    // 任务暂停   按钮
    suspend(row) {
      if (row.progressStatus != "3") {
        return;
      } else {
        this.$confirm(
          `${this.$t("确定暂停任务")}${row.taskName}?`,
          this.$t("提示"),
          {
            confirmButtonText: this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            type: "warning",
          }
        )
          .then(() => {
            API_taskControl({
              cmd: "3X12",
              values: [row.taskId, row.taskExecId],
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.$message({
                  type: "success",
                  message: this.$t("任务已暂停"),
                });
                this.getDataList();
              } else {
                this.$message.error(this.$t("暂停失败请重试"));
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("已取消"),
            });
          });
      }
    },
    //查看每天的详情
    getDayDetail(data) {
      this.currentChanel = "day";
      this.monthJogDay = data.day;
      this.monthDay = this.monthJogDay;
      this.getDataList();
    },
    //删除每天的任务信息
    delDay(data) {
      this.dayTaskMadal = true;
      this.delDayInfo = data.day;
    },
    closeDialog() {
      this.dayTaskMadal = false;
    },
    taskDialogConfirm() {
      var params = {
        execTime: this.delDayInfo,
      };
      API_calendarDelete(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功！");
          this.dayTaskMadal = false;
          setTimeout(() => {
            this.getDataList();
          }, 1000);
        }
      });
    },
    /**折叠、展开按钮 */
    collapseBtn() {
      this.isCollapse = !this.isCollapse;
    },
    /**年、月change事件(月纬度) */
    selectTimeChange(val) {
      if (val) {
        this.isToday = false;
      }
    },
    /**年、月change事件(日纬度) */
    selectDayChange(val) {
      if (val) {
        this.isDay = false;
      }
    },
    /**日期点击事件 */
    allcalendar(info) {},
    /**搜索按钮 */
    serachBtn() {
      this.currentChanel = "day";
      this.serachFlag = false;
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getDataList();
    },
    /**重置按钮 */
    resetFormBtn() {
      this.listQuery = {
        taskName: "",
        startTime: "",
        endTime: "",
        progressStatusList: [],
        execTime: this.curYear + "-" + this.curMonth, //执行事件
        pageNum: 1,
        pageSize: 10,
      };
      this.serachFlag = true;
      this.todayStart = "";
      this.todayEnd = "";
      this.currentChanel = "month";
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getDataList();
    },
    /**获取表格数据 */
    getDataList() {
      //处理任务进度状态
      let progressStatusList = this.listQuerySubmit.progressStatusList;
      if (progressStatusList && progressStatusList.length > 0) {
        if (progressStatusList.indexOf(",") == -1) {
          progressStatusList = String(progressStatusList);
        } else {
          progressStatusList = progressStatusList.join(",");
        }
      }
      let obj = {
        ...this.listQuerySubmit,
        progressStatusList: progressStatusList,
      };
      if (this.currentChanel == "day") {
        delete obj.execTime;
        //从日历跳转过来
        if (this.monthJogDay && this.serachFlag) {
          obj.startTime = `${this.monthJogDay} 00:00:00`;
          obj.endTime = `${this.monthJogDay} 23:59:59`;
        }
        if (this.todayStart && this.serachFlag) {
          //点击今天 或者选择日期时
          obj.startTime = this.todayStart;
          obj.endTime = this.todayEnd;
        }
        API_getcalendarpageList(obj).then((res) => {
          if (res.code == 200) {
            this.tableData = res.rows;
          } else {
            this.tableData = [];
          }
          this.total = Number(res.total);
          this.listQuery = Object.assign({}, this.listQuerySubmit);
        });
      } else {
        obj.startTime = null;
        obj.endTime = null;
        API_getcalendarList(obj).then((res) => {
          if (res.code == 200) {
            this.calenData = res.data;
            this.calenData.forEach((item) => {
              this.dateData.push(item.date);
            });
            this.listQuery = Object.assign({}, this.listQuerySubmit);
          }
        });
      }
    },
    /**切换列表、表格 */
    chanelBtn(type) {
      switch (type) {
        case "month":
          this.currentChanel = "month";
          this.isToday = false;
          this.todayStart = "";
          break;
        case "day":
          this.currentChanel = "day";
          this.monthDay = moment(new Date()).format("YYYY-MM-DD");
          this.todayStart = moment(new Date()).format("YYYY-MM-DD 00:00:00");
          this.todayEnd = moment(new Date()).format("YYYY-MM-DD 23:59:59");
          this.listQuery = {
            taskName: "",
            startTime: this.todayStart,
            endTime: this.todayEnd,
            progressStatusList: [],
            execTime: "", //执行事件
            pageNum: 1,
            pageSize: 10,
          };
          break;
      }
      this.listQuery.execTime = this.curYear + "-" + this.curMonth;
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getDataList();
    },
    /**处理时间 */
    handleTime(s) {
      return s < 10 ? "0" + s : s;
    },
    /**查看任务item项详情 */
    tackClick(taskInfo) {
      let status = taskInfo.progressStatus;
      if (status == "1" || status == "2" || status == "3" || status == "4") {
        this.$refs.add.open(
          "preview",
          "查看",
          taskInfo.progressStatus.toString(),
          taskInfo.taskId,
          taskInfo.taskExecId
        );
      } else {
        this.$router.push({
          path: "/inspectrecords/object",
          query: {
            taskName: taskInfo.taskName,
            taskExecId: taskInfo.taskExecId,
            progressStatus: taskInfo.progressStatus,
            beginTime: `${taskInfo.execDay} ${taskInfo.execTime}`,
          },
        });
      }
    },
    /**新增任务*/
    addTask() {
      this.$refs.add.open("add", this.$t("快捷创建任务"));
    },
    /**复制任务 */
    copyBtn() {},
    /**点击今天（月） */
    todayClick() {
      this.isToday = !this.isToday;
      if (this.isToday) {
        this.curYear = new Date().getFullYear();
        this.curMonth = (new Date().getMonth() + 1).toString().padStart(2, "0");
      }
    },
    /**点击今天（日） */
    dayClick() {
      this.todayStart = moment(new Date()).format("YYYY-MM-DD 00:00:00");
      this.todayEnd = moment(new Date()).format("YYYY-MM-DD 23:59:59");
      this.monthDay = moment(new Date()).format("YYYY-MM-DD");
      this.getDataList();
    },
    changeDate(date) {
      this.todayStart = `${date} 00:00:00`;
      this.todayEnd = `${date} 23:59:59`;
      this.getDataList();
    },
  },
  beforeDestroy() {
    clearInterval(this.currentTaskTimer);
    this.currentTaskTimer = null;
  },
};
</script>

<style lang="scss" scoped>
.el-icon-arrow-left {
  margin: 0 12px 0 24px;
}
.el-icon-arrow-right {
  margin: 0 24px 0 12px;
}
.select {
  height: 66px;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-left: 1px solid rgba(219, 255, 251, 0.2);
  border-right: 1px solid rgba(219, 255, 251, 0.2);
  border-top: 1px solid rgba(219, 255, 251, 0.2);
  .el-form {
    display: flex;
    align-items: center;
  }
  .el-form--inline .el-form-item {
    margin: 0;
  }
  .selectForm {
    .myselect {
      width: 100px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .chanel {
      display: flex;
      padding: 4px 0px;
      box-sizing: border-box;
      background-color: #263342;
      .monthTab {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 58px;
        height: 24px;
        background: #263440;
        border-radius: 2px;
        color: #a6acb1;
      }
      .blueTab {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 58px;
        height: 24px;
        background: #00d1ff;
        border-radius: 2px;
        opacity: 0.6;
        color: #ffffff;
      }
    }
  }
}

.today {
  width: 52px;
  height: 40px;
  border-radius: 2px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #374c58;
  background-color: #263442;
  cursor: pointer;
  margin-right: 6px;
}

.el-calendar-table {
  .el-calendar-day {
    height: 180px;
  }
}
//日历组件
.calendar-copm {
  // margin-top: 15px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 18px 24px 0;
  box-sizing: border-box;
  color: #ffffff;
  //头部
  .cal-header {
    display: flex;
    justify-content: space-between;
    line-height: 14px;
    padding-bottom: 15px;
    box-sizing: border-box;
    // .header-left {
    //   display: flex;
    //   align-items: center;
    // }
    .header-right {
      display: flex;
      // 状态集合
      .status-gather {
        display: flex;
        align-content: center;
        align-items: center;
        .status-point {
          width: 8px;
          height: 8px;
          margin: 0 5px 0 24px;
          border-radius: 50%;
        }
      }
    }
  }
}
.item-radius {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  vertical-align: super;
}
.item-span {
  display: inline-block;
  padding-left: 8px;
  font-size: 10px;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.there-were {
  padding-left: 12px;
  color: #dbfffb;
  font-size: 12px;
}
//表格样式
.table {
  margin: 0 0 30px;
  position: relative;
  .table-btns {
    display: flex;
    div {
      display: flex;
      // width: 100px;
      height: 30px;
      justify-content: center;
      align-items: center;
      margin-left: 5px;
      font-size: 12px;
    }
  }
  .pagenation {
    position: absolute;
    bottom: -15px;
    right: 20px;
  }
}
.table-date {
  height: 48px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .center-time {
    color: #fff;
  }
  .right-opera {
    position: absolute;
    display: flex;
    right: 10px;
    top: 10px;
    font-size: 12px;
    color: #606266;
    background: transparent;
    border: 1px solid rgba(219, 255, 251, 0.2);
    div:nth-child(2) {
      border-left: 1px solid rgba(219, 255, 251, 0.2);
      border-right: 1px solid rgba(219, 255, 251, 0.2);
    }
    div {
      padding: 7px 15px;
      cursor: pointer;
    }
    div:hover {
      color: #409eff;
    }
  }
}

//抽屉盒子
.drawer-title {
  display: flex;
  justify-content: space-between;

  img {
    flex: 1;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  img:nth-child(2) {
    margin: 0 16px;
  }
  img:nth-child(3) {
    margin-right: 10px;
  }
}
.drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
//弹框
.cycle-dialog {
  div {
    margin-bottom: 20px;
  }
  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    div:nth-child(2) {
      margin-left: 10px;
    }
  }
}
.calender-item {
  height: 18px !important;
}
// 使不是本月的日期不可点击，不会跳转到其他月份
::v-deep {
  // .el-calendar-table {
  //   &:not(.is-range) {
  //     td.next {
  //       pointer-events: none;
  //       color: rgba(219, 255, 251, 0.2);
  //     }
  //     td.prev {
  //       pointer-events: none;
  //       color: rgba(219, 255, 251, 0.2);
  //     }
  //   }
  // }
}

::v-deep {
  .el-calendar__title {
    color: #fff !important;
  }
  .el-calendar {
    color: #dbfffb;
  }
  .el-calendar-table thead th {
    color: #dbfffb;
    font-size: 20px;
  }
  // 更改边框颜色
  .el-calendar__header {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 8px 20px;
    padding-top: 15px;
    box-sizing: border-box;
    border-bottom: 0;
  }

  .el-calendar__button-group {
    // display: none;
    position: absolute;
    right: 0;
    top: 10px;
    .el-button {
      background: transparent;
      border: 1px solid rgba(219, 255, 251, 0.2);
    }
  }
  .el-calendar-table td {
    border-bottom: 1px solid rgba(219, 255, 251, 0.2);
    border-right: 1px solid rgba(219, 255, 251, 0.2);
  }
  .el-calendar-table tr td:first-child {
    border-left: 1px solid rgba(219, 255, 251, 0.2);
  }
  .el-calendar-table tr:first-child td {
    border-top: 1px solid rgba(219, 255, 251, 0.2);
  }
  // 更改内部padding
  .el-calendar-table .el-calendar-day {
    // overflow-y: scroll;
    height: 100px;
    padding: 0 3px;
    p {
      margin: 0;
      padding: 0 10px;
    }
  }
  // 鼠标悬浮样式
  .el-calendar-table .el-calendar-day:hover {
    background-color: transparent !important;
  }
  .el-calendar-table td.is-selected {
    background-color: transparent !important;
  }
  // .el-calendar-table thead th:before {
  //   content: "Week ";
  // }
  //表头添加边框
  .el-calendar__body {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    .el-calendar-table {
      th {
        border: 1px solid rgba(219, 255, 251, 0.2) !important;
        border-bottom: 0 !important;
        border-right: 0 !important;
      }
      th:nth-child(7) {
        border-right: 1px solid rgba(219, 255, 251, 0.2) !important;
      }
    }
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top: 30vh !important;
  }
  .el-dialog__body {
    padding-bottom: 0;
  }
  .el-popover__reference {
    // width: 65px;
  }
  .el-calendar__header {
    display: none;
    padding: 0 !important;
    .el-calendar__button-group {
      // 隐藏原生按钮
      display: none;
    }
    .el-calendar__title {
      display: none;
    }
  }
}
.el-dialog {
  position: relative;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
  .line-one {
    text-align: center;
    margin-bottom: 24px;
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
    .confirm-font {
      display: inline-block;
      //   margin-left: 16px;
    }
    .warn-font {
      color: #ffad30;
    }
  }
  .line-two {
    margin-top: 22px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
.obj-text {
  width: 95%;
  // height: 140px;
  margin-left: 10px;
  padding: 16px;
  box-sizing: border-box;
  text-align: left;
  background-color: rgba(255, 173, 48, 0.06);
  font-size: 11px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #ffad30;
  line-height: 17px;
}
</style>
